﻿@using ZBJF.Warranty.Common.Common
@using ZBJF.Warranty.WebProvider
@model ZBJF.Warranty.Model.ProductModels
@{
    ViewBag.Title = "选择型号";
}
@section Header{
    @Scripts.Render("~/bundles/chosen")
    @Styles.Render("~/Content/chosen")
}
<form id="mvcForm">
    <table style="margin: 10px auto;">
        <tr>
            <th class="w80">
                品牌
            </th>
            <td>
                @Html.DropDownListFor(m => m.BrandId, ConvertToSelector.Instance.ProductBrandConvertToSelectList(), new { style = "width: 120px", onchange = "brandChange(this)" })
                @Html.Hidden("BrandName")
            </td>
        </tr>
        <tr>
            <th>
                型号
            </th>
            <td>
                <div id="div_ID"></div>
                @Html.HiddenFor(m => m.ModelName)
            </td>
        </tr>
        <tr>
            <th>
                型号编码
            </th>
            <td>
                @Html.TextBoxFor(m => m.ModelCode, new { @class = "w120", onfocus = "this.blur()" })
            </td>
        </tr>
    </table>
</form>
<div class="form-actions control-group align-center">
    <input id="btnConfirm" class="btn btn-primary Edit-R" type="submit" onclick="parent.setSelectModel($('#mvcForm').serializeJson()); parent.layer.closeAll();" value="确认">
    <input id="btnClose" class="btn" type="button" value="取消" onclick="parent.layer.closeAll()">
</div>
@section scripts{
    <script type="text/javascript">
        $(function () {
            $("#BrandId").chosen();
            brandChange($("#BrandId"));
        });
        function brandChange(obj) {
            $("#BrandName").val($(obj).find("option:selected").text());
            if ($(obj).val() == "") {
                $("#ID").empty().show();
                $("#ID_chosen").remove();
                $("#ModelCode").val("");
            } else {
                $.ajax({
                    data: { BrandID: $(obj).val() },
                    url: "/ProductModel/GetModelList",
                    success: function (data) {
                        if (data.success) {
                            if (data.ModelList.length > 0) {
                                var html = "<select id='ID' name='ID' onchange='modelChange()' style='width:120px'>";
                                for (var i = 0; i < data.ModelList.length; i++) {
                                    var model = data.ModelList[i];
                                    html += "<option value='" + model.ID + "' data-modelcode='" + model.ModelCode + "'>" + model.ModelName + "</option>";
                                }
                                html += "</select>";
                                var modelID = "@(Model != null ? Model.ID : 0)";
                                $("#div_ID").html(html);
                                $("#ID  option[value='" + modelID + "']").attr("selected", true);
                                $("#ModelName").val($("#ID option:selected").text());
                                $("#ModelCode").val($("#ID option:selected").data("modelcode"));
                                $("#ID").chosen();
                                modelChange();
                            } else {
                                $("#ID").empty().show();
                                $("#ID_chosen").remove();
                                $("#ModelCode").val("");
                            }
                        }
                    },
                    error: function (error) {
                        console.log(error.responseText);
                    }
                });
            }
        }
        function modelChange() {
            $("#ModelCode").val($("#ID option:selected").data("modelcode"));
        }
    </script>
}
